import React from "react";

class App1 extends React.Component {
  state = {
    count: 1,
    flag: false,
  };
  handleClick() {
    const { count } = this.state;
    // 修改 state
    // this.setState  唯一方式 修改state
    this.setState({
      count: count + 1,
    });
  }
  handleFlag() {
    console.log(document.querySelector("h2"));
    this.setState(
      {
        flag: true,
      },
      () => {
        // 数据更新完毕， 页面更新完毕
        console.log(document.querySelector("h2"));
      }
    );
    console.log(document.querySelector("h2"));
    console.log(document.querySelector("h2"));
    console.log(document.querySelector("h2"));
    console.log(document.querySelector("h2"));
    console.log(document.querySelector("h2"));
    console.log(document.querySelector("h2"));
    console.log(document.querySelector("h2"));
  }
  // 挂载
  constructor(props) {
    super(props);
    // 初始化 state
    // 绑定this

    console.log(document.querySelector("h1"));
  }
  render() {
    // 返回渲染结构
    console.log(2);
    const { count, flag } = this.state;
    return (
      <div>
        <div>事件</div>
        <h1>{count}</h1>
        <button onClick={() => this.handleClick()}>+1</button>

        <hr />
        {flag && <h2>哈哈哈</h2>}

        <button onClick={() => this.handleFlag()}>显示</button>
      </div>
    );
  }
  componentDidMount() {
    console.log(document.querySelector("h1"));
    // dom 首次渲染完毕
    // 进行 副作用
    console.log(3);
  }
  // 更新
  shouldComponentUpdate() {
    console.log(document.querySelector('h1').innerHTML)
    // 用来优化性能
    return true
  }
  componentDidUpdate() {
    // 数据更新完毕， 并且dom也更新完毕
    console.log(document.querySelector('h1').innerHTML)
  }
  // 卸载
  componentWillUnmount() {
    // 卸载
  }
  // 捕获异常
  componentDidCatch() {
    
  }
}

export default App1;
